<template>
  <!-- 背景图直接设置在父盒子 -->
  <div id="app">
    <!-- 表单结构 -->
    <!-- el-form 表单；model 表单的数据源 -->
    <el-form ref="Form" :model="ruleForm" :rules="rules" class="myform">
      <h3>iHRM 后台登录系统</h3>
      <el-form-item prop="mobile">
        <el-input
          v-model="ruleForm.mobile"
          prefix-icon="el-icon-user-solid"
          type="text"
          autocomplete="off"
          placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="ruleForm.password"
          prefix-icon="el-icon-lock"
          type="password"
          autocomplete="off"
          placeholder="请输入登录密码"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          class="mybtn"
          @click="submitForm"
        >登录</el-button>
      </el-form-item>
      <!-- 链接 -->
      <a class="link" href="#">还没帐号？立即注册</a>
    </el-form>
  </div>
</template>

<script>
// 调用登录接口API
// import { loginAPI } from '@/api/index'
// 导入vuex中的辅助函数
import { mapActions } from 'vuex'
export default {
  data() {
    return {
      ruleForm: {
        mobile: '',
        password: ''
      },
      // 设置验证规则对象
      rules: {
        mobile: [
          // required 是否为必填项; trigger 触发时机; message 提示信息
          { required: true, trigger: 'blur', message: '用户名不能为空' },
          // 设置验证规则
          {
            validator: (rule, value, callback) => {
              // value 被校验的参数
              // callback 回调函数。如果校验成功就执行callback()，如果不成功就执行callback(new Error('提示信息'))
              const reg =
                /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/ // 设置规则对象
              // 判断输入的内容是否符合验证规则
              reg.test(value) ? callback() : callback(new Error('手机号不合法'))
            },
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, trigger: 'blur', message: '密码不能为空' },
          {
            validator: (rule, value, callback) => {
              const res = /^\d{6}$/
              res.test(value)
                ? callback()
                : callback(new Error('请正确填写6位数字的验证码'))
            },
            trigger: 'blur'
          }
        ]
      },
      loading: false
    }
  },
  methods: {
    ...mapActions({
      getToken: 'user/getToken'
    }),
    submitForm() {
      this.$refs.Form.validate(async(valid) => {
        // 登录按钮点击时进入加载状态
        this.loading = true
        // 判断valid的状态
        if (valid) {
          try {
            console.log(this.ruleForm)
            // 校验通过后直接调用store/user模块中的actions的方法
            await this.getToken(this.ruleForm) // 这是一个网络请求：请求需要时间，下面的代码又必须等到这段代码执行之后才能执行，需要在方法前加await

            // 获取路径上携带的参数
            const _redirect = this.$route.query._redirect
            // 判断路径参数是否有值
            if (_redirect) {
              // 路径参数有值就跳转到对应的页面
              this.$router.push(_redirect)
            } else {
              // 路径参数没有值就跳转到首页
              this.$router.push('/')
            }
            // 登陆成功后的提示信息
            this.$message({
              message: '用户登录成功',
              type: 'success'
            })
          } catch (error) {
            // console.log(error)
            this.$message.error(error.message)
          }
        } else {
          this.$message.error('请正确输入用户名和密码')
        }
        this.loading = false
        this.ruleForm.mobile = ''
        this.ruleForm.password = ''
      })
    }
  }
}
</script>

<style scoped lang="scss">
#app {
  background: url('../../assets/404_images/login.jpg') center no-repeat;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .myform {
    width: 520px;
    padding: 20px 32px 15px;
    box-sizing: border-box;
    text-align: center;
    background-color: #388ffa;
    border-radius: 12px;
    h3 {
      color: #fff;
      font-size: 50px;
      font-weight: 100;
      margin: 0 0 16px;
    }
    .mybtn {
      width: 100%;
      height: 55px;
      font-size: 22px;
      border-radius: 8px;
      margin-bottom: 10px;
    }
    .link {
      display: block;
      font-size: 14px;
      color: #fff;
      margin: -15px 0 0;
      &:hover {
        color: tomato;
      }
    }
  }
}
::v-deep .el-form-item__error {
  color: rgb(252, 80, 57);
}
::v-deep .el-input {
  .el-input__inner {
    font-size: 14px;
    background: #d3e5ff;
    height: 44px;
    color: #59a4f5;
  }
}
</style>
